<!DOCTYPE html>
<html lang="en">
    <head >
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* .container{
                width: 100px;
                height: 100px;
                background-color: red;
            } */

            #test{
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body >
        <!-- ! 现代浏览器的兼容性很好,会帮你假设很多条件 -->
        <!-- ! 浏览器牛逼不是你牛逼 -->
        <!-- ! 浏览器不够牛逼，所以很多情况，会假设错误 -->
        <!-- ? attribute 属性 -->
        <!-- ? 全局属性代表着，所有的标签都拥有这些属性，有这么几种 -->
        <!-- ? class 类名 -->
        <!-- ? id 唯一标识符 -->
        <!-- ? data-* 自定义属性  (*)通配符--> 
        <!-- ? hidden 隐藏 -->
        <div class="container" 
            id="test" 
            data-index="1" 
            data-xxx="xxxx"
            hidden
        >
            123
        </div>

    </body>
</html>